<script setup lang="ts">
import { SHORTCUT_PRIORITY, useDialogShortcut, useShortcut } from '@/hooks/common';
import { onMounted, ref } from 'vue';
import QueryTable from '../home/modules/query-table.vue';

defineOptions({ name: 'Inner' });

const modal = ref(false);

const shortcut = useShortcut(SHORTCUT_PRIORITY.MODAL);

const dialogShortcut = useDialogShortcut();

function refreshHandler() {
    modal.value = true;
    dialogShortcut.bind('enter', continueHandler);
}

function continueHandler() {
    dialogShortcut.unbind('enter');
    modal.value = false;
}

onMounted(() => {
    shortcut.bind('Ctrl+G', refreshHandler);
});
</script>

<template>
    <div>
        DEMO!!!
        <NCard>
            <QueryTable :priority="SHORTCUT_PRIORITY.MODAL"></QueryTable>
        </NCard>

        <!-- 继续操作 -->
        <NModal
            v-model:show="modal"
            preset="dialog"
            title="Dialog Title"
            content="测试 dialog"
            positive-text="Y"
            negative-text="N"
            @negative-click="continueHandler"
        />
    </div>
</template>
